<template>
  <div class="myOrder">
    <div class = "header">
        <router-link to="/home/home_index" class = "backspace iconfont icon-leftArr"></router-link>订单
    </div>
    <div v-if="uname==false" class = 'noneOrder'>
      <div class="content">
        <img src="static/img/noneOrder.png" alt="">
        <p>登录后查看外卖订单</p>
        <button>立即登录</button>
      </div>
    </div>
    <ul v-else>
      <template v-for="(item,index) in goodList">
        <li :key='index'>
          <div class="left">
            <img :src="getImgUrl(item)" alt="">
          </div>
          <div class="right">
            <div class = "item">
              <div class="shop">
                <p class = "orderShop">mi厨(航城店)
                  <span class = "iconarrow iconfont icon-rightArr"></span></p>
                <p class = "orderTime">2018-11-05 13:50</p>
              </div>
              <div class="status">
                  订单已取消
              </div>
            </div>
            <div class = "item">
              <div class="amount"> {{item.name}}等{{item.num}}件商品</div>
              <div class="price">¥{{item.price*item.num}}</div>
            </div>
          </div>
        </li>
      </template>

    </ul>
  </div>
</template>
<style lang="scss" scoped>
  .myOrder{
    .header{
      text-align: center;
      background: #2395ff;
      font-size:0.18rem;
      height:0.44rem;
      line-height:0.44rem;
      font-weight: 700;
      color:#fff;
      background-image: linear-gradient(90deg,#0af,#0085ff);
      border-bottom:0.01rem solid #ffffff;
      .backspace{
        display: block;
        float:left;
        margin-left:0.16rem;

      }
      .icon-leftArr {
        color: white;
        font-size: .2rem;
        font-weight: bold;
      }
    }
    .noneOrder{
      .content{
        margin-top:1rem;
        text-align: center;
        img{
          width:2rem;
          height:2rem;
        }
        p{
          margin:0.1rem 0;
          color:#6a6a6a;
          font-size: 0.16rem;
        }
        button{
          font-size: 0.13rem;
          padding:0.1rem;
          background:#56d176;
          color:#fff;
          outline:none;
          border:0 none;
          width:1rem;
          border-radius: 0.02rem;

        }
      }
    }
    ul{
      li{
        margin-top:0.1rem;
        padding-top:0.14rem;
        padding-left:0.15rem;
        background:#fff;
        display: flex;
        img{
          width:0.32rem;
          width:0.32rem;
        }
        .left{
          margin-right:0.1rem;
        }
        .right{
          flex:1;
          .item{
            padding-right:0.13rem;
            padding-bottom:0.1rem;
            display: flex;
            flex-direction:row;
            justify-content: space-between;
            .shop{
              .orderShop{
                font-size: 0.16rem;
              }
              .orderTime{
                font-size: 0.12rem;
                color:#999;
              }
            }
            .status{
                font-size: 0.12rem;
              }
          }
          .item:nth-child(2){
            border-top:1px solid #eee;
            padding-top:0.15rem;
          }
        }
      }
    }
  }
</style>
<script>
export default {
  data(){
    return {
      uname:"",
      goodList:[]
    }
  },
  methods:{
      getImgUrl(item) {
        var str = "";
        var hz = item.image_path.slice(32, 37) == "png" ? "png" : "jpeg";
        str = `//fuss10.elemecdn.com/${
          item.image_path
        }.${hz}?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/`;
        return str;
      }
  },
   mounted(){
     this.uname = localStorage.getItem('uname');
     var ShopInfo = this.uname + 'goodInfo';
     this.goodList = localStorage.getItem(ShopInfo);
     this.goodList = JSON.parse(this.goodList);
     console.log(this.goodList);
   }
}
</script>
